<template>
  <a-modal :open="open" width="950px" title="新增疫苗登记" ok-text="保存" :ok-button-props="{ disabled: !isCompleted }" centered @ok="onOk" @cancel="onCancel">
    <div class="flex">
      <div class="w-1/2 pr-2">
        <a-input v-model:value="formState.brName" disabled placeholder="请输入" />
        <UserCard :user-data="vaccinumInfo" class="mt-3">
          <div class="flex flex-col px-5 h-[200px] text-base">
            <LabelValue label-align="right" :label-width="120" class="mt-8" :width="300" label="疫苗信息" :value="vaccinumInfo.vaccinInfo" />
            <LabelValue label-align="right" :label-width="120" class="mt-5" label="接种剂次" :value="vaccinumInfo.vaccinationNumberName" />
            <LabelValue label-align="right" :label-width="120" class="mt-5" label="接种日期" :value="vaccinumInfo.vaccinationDate" />
          </div>
        </UserCard>
      </div>
      <div class="w-1/2">
        <a-form :model="formState" class="form-style-flex">
          <a-form-item label="接种日期" v-bind="validateInfos.vaccinationDate" class="w-full">
            <a-date-picker v-model:value="formState.vaccinationDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </a-form-item>
          <a-form-item label="接种剂次" class="w-full">
            <SelectItem v-model:value="formState.vaccinationNumber" type="DT00299" placeholder="请选择" />
          </a-form-item>
          <a-form-item label="有效时间" v-bind="validateInfos.effectiveTime" class="w-full">
            <a-date-picker v-model:value="formState.effectiveTime" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
          </a-form-item>
          <a-form-item label="疫苗信息" class="w-full">
            <a-input v-model:value="formState.vaccinInfo" placeholder="请输入" />
          </a-form-item>
          <a-form-item label="接种地点" class="w-full">
            <a-input v-model:value="formState.vaccinationAddress" placeholder="请输入" />
          </a-form-item>
          <a-form-item label="备注" class="w-full">
            <a-textarea v-model:value="formState.memo" :rows="3" placeholder="请输入" />
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { post } from '@/utils/request'
import LabelValue from '@/components/LabelValue'
import UserCard from '@/components/UserCard'

const vaccinumInfo = ref({})
const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: Boolean,
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const formState = ref({})
const rulesState = ref({
  vaccinationDate: [{ required: true, message: '请选择接种日期' }],
  effectiveTime: [{ required: true, message: '请选择有效时间' }]
})

//获取标签
const { resetFields, isCompleted, validateInfos } = useForm(formState, rulesState)

// 获取疫苗登记第一条数据
const getVaccinRegistration = async () => {
  const { code, data, msg } = await post('/war/epidemicPrevention/getEpidemicRegistrationVaccinResponseList', { brId: props.rowData?.brId })
  if (code !== 0) return message.error(msg)
  vaccinumInfo.value = { ...(data.length && data[0]) }
  if (data.length) {
    formState.value.vaccinationDate = data[0].vaccinationDate
    formState.value.effectiveTime = data[0].effectiveTime
  }
}

const onOk = async () => {
  delete formState.value.id
  const res = await post('/war/epidemicPrevention/doSaveEpidemicRegistrationVaccin', formState.value)
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  emit('success')
  onCancel()
}

const onCancel = () => {
  emit('update:open', false)
  resetFields()
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      formState.value = { ...props.rowData, vaccinationDate: dayjs().format('YYYY-MM-DD'), effectiveTime: dayjs().format('YYYY-MM-DD') }
      getVaccinRegistration()
    }
  }
)
</script>

<style lang="less" scoped>
.ant-descriptions {
  :deep(.ant-descriptions-item-label) {
    padding-top: 3px;
  }
}
.tag-item {
  margin-right: 8px;
  overflow: hidden;
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  .tag-item-label {
    padding: 4px 12px;
    color: #fff;
    background-color: var(--primary-color);
  }
  .tag-item-value {
    padding: 4px 12px;
  }
}
.ant-tag-checkable-checked {
  color: #fff;
  background-color: var(--primary-color);
}
</style>
